<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>练习vue的axios</title>

    <script src="../vue/vue.js"> </script>
    <script src="../vue/axios.min.js"> </script>

</head>

<body>

    <div id="app">
        <!-- 需求：点击按钮，去1.json里获取city的数据并展示 -->
        <button @click="show()">点我展示数据</button>
        {{name}}住在
        <select>
            <option v-for="i in city">{{i}}</option>
        </select>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                name: '',
                city: ''
            },
            methods: {
                show() {
                    axios.get('../JSON文件/1.json').then(
                        a => {
                            this.name = a.data.name;

                            this.city = a.data.city;
                        }
                    )
                }
            }
        })
    </script>


</body>

</html>